<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>登录注册</title>
    <link rel="stylesheet" href="/static/css/bootstrap/bootstrap.min.css">
    <link rel="stelesheet" href="/static/css/login.css">
    <link rel="stelesheet" href="/static/plugins/layui/css/layui.css">
    <script src="/static/plugins/jquery/jquery-3.4.1.min.js"></script>
    <script src="/static/plugins/bootstracp/js/bootstrap.min.js"></script>
<!--    <script src="js/login.js"></script>-->
    <script type="text/javascript">
        // $(function () {
        //     $("#loginFor").submit(function (event) {
        //         const f = $(this);
        //         if (f[0].checkValidity() === false) {
        //             event.preventDefault();
        //             event.stopPropagation()
        //         }
        //         f.addClass("was-validated")
        //     });
        // })
    </script>
    <style>
        body {
            background-color: #f8fafc;
        }

        /* font-family: "microsoft yahei"; */
        /*min-width: 800px;*/
    </style>
</head>

<body>
<script src="/static/js/canvas.js"></script>
<!-- 注册窗口 -->
<div id="register" class="modal fade" tabindex="100">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h3 class="text-center">用户注册</h3>
            </div>
            <div class="modal-body">
                <form id="loginFor" novalidate class="form-group has-success has-feedback">
                    <div class="form-group">
                        <label for="user">用户名</label>
                        <input id="user" pattern="[\u4e00-\u9fa5-A-Za-z0-9]{1,10}"
                               class="form-control" type="text" placeholder="个数小于10的中英文字符" required="required">
                        <div></div>
                        <div id="userCue" class="invalid-feedback"><small>请输入用户名小于10位字符！</small></div>
                        <!-- <span class="help-block">你输入的信息是正确的</span> -->
                        <!-- <span class="glyphicon glyphicon-ok form-control-feedback"></span> -->
                    </div>
                    <div class="form-group">
                        <label for="password1">密码</label>
                        <input pattern="[A-Za-z0-9]{6,15}" id="password1" class="form-control"
                               type="password" placeholder="至少6位大小字母或数字" required="required">
                        <div class="invalid-feedback"><small>密码长度至少为六位,只能是大小写字母或数字！！</small></div>
                    </div>
                    <div class="form-group">
                        <label for="password2">再次输入密码</label>
                        <input pattern="[A-Za-z0-9]{6,15}" id="password2" class="form-control" type="password"
                               placeholder="至少6位大小字母或数字" required="required">
                        <div id="passverify" class="invalid-feedback"><small>密码长度至少为六位,只能是大小写字母或数字！！</small></div>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input class="form-control" id="email" type="email" placeholder="例如:123@123.com"
                               required="required">
                    </div>
                    <a style="position: absolute;margin-top: 10px;" href="" data-dismiss="modal"
                       data-target="#login">已有账号？点我登录</a>
                </form>
                <div class="text-right" style="margin-top: 10px;">
                    <button id="submits" class="btn btn-primary" type="submit">提交</button>
                    <button class="btn btn-danger" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 登录窗口 -->
<div id="login" class="">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <!-- <span>&times;</span> -->
                </button>
            </div>
            <div class="modal-title">
                <h3 class="text-center">用户登录</h3>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <div class="form-group">
                        <label for="userlogin">用户名</label>
                        <input class="form-control" id="userlogin" name="userid" type="text" placeholder="" required="required">
                    </div>
                    <div class="form-group">
                        <label for="passwordlogin">密码</label>
                        <input class="form-control" id="passwordlogin" name="passwd" type="password" placeholder=""
                               required="required">
                    </div>
                    <a href="" style="position: absolute;margin-top: 10px;" data-toggle="modal" data-dismiss="modal"
                       data-target="#register">还没有账号？点我注册</a>
                    <div class="text-right">
                        <button id="loginIndex" class="btn btn-primary" type="submit">登录</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                </div>

                <div style="height: 40px;text-align: center;margin-top: 30px;">
                        <span><a href="" style="margin-right: 10px;">
                                <img src=""
                                     alt="官方公众号">
                            </a>
                        </span>
                    <span>
                        <a id="qqLogin" href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=101831951&redirect_uri=http://localhost:8080/oauth/qq/callback&scope=get_user_info"
                           target="_self" style="padding-left: 10px;z-index: 0">
                            <img  src=""
                                 alt="客服QQ">
                        </a></span>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/plugins/layui/layui.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        $("#qqLogin").click(function () {
            window.location.href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=101831951&redirect_uri=http://localhost:8080/oauth/qq/callback&scope=get_user_info";
        });
        //登录
        // $("#loginIndex").click(function () {
        $("#loginIndex").click(function () {
            var userid = $("#userlogin").val();
            var password = $("#passwordlogin").val();
            if(userid === "" || password === ""){
                layer.alert("用户名或密码不能为空！", {
                    time: 1000,
                    icon: 2,
                    skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                });
            }else {
            $.ajax({
                url: "/login",
                data: {userid: userid, passwd: password},
                type: "post",
                success: function (res) {
                    if (res.code === 0) {
                        layer.alert("恭喜！登录成功!1秒后自动跳转！", {
                            time: 1000,
                            icon: 1,
                            skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                        });
                        setTimeout(function () {
                            window.location.href="/index.html";
                        },1500);
                    }else {
                        layer.alert(res.msg, {
                            time: 1000,
                            icon: 2,
                            skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                        });
                    }
                }
            });
            }
        });
        $("#password2").blur(function () {
            if ($("#password1").val() !== $("#password2").val()) {
                // $("#password2").focus();
                layer.alert("两次密码不一致！请重新输入！", {
                    icon: 2,
                    skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                });
            }
        });
        $("#user").blur(function () {
            var userName = $(this).val();
            $.ajax({
                url: "/user/checkUser",
                data: {userName: userName},
                type: "post",
                success: function (res) {
                    if (res) {
                        $("#user").val("");
                        layer.alert("该用户名已被注册，请重新输入新的名字", {
                            icon: 2,
                            skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                        });
                    }
                }
            });
        });
        $("#submits").click(function () {
            var userName = $(this).val();
            $.ajax({
                url: "/user/checkUser",
                data: {userName: userName},
                type: "post",
                success: function (res) {
                    var sqq = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/;
                    if (res) {
                        $("#user").val("");
                        layer.alert("该用户名已被注册，请重新输入新的名字", {
                            icon: 2,
                            time: 5000,
                            skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                        });
                    } else if ($("#password1").val() !== $("#password2").val()) {
                        // $("#password2").focus();
                        layer.alert("两次密码不一致！请重新输入！", {
                            icon: 2,
                            skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                        });
                    } else if (!sqq.test($("#email").val())) {
                        // $("#password2").focus();
                        layer.alert("邮箱格式错误！请重新输入！", {
                            icon: 2,
                            skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                        });
                    } else {
                        var userid = $("#user").val();
                        var password = $("#password2").val();
                        var email = $("#email").val();
                        $.ajax({
                            url: "/user/register",
                            data: {userid: userid, password: password, email: email},
                            type: "post",
                            success: function (res) {
                                if (res.code === 0) {
                                    layer.alert("恭喜！注册成功", {
                                        icon: 1,
                                        time: 1000,
                                        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                                    });
                                    setTimeout(function () {
                                        parent.location.href = "login.html";
                                    },2000);
                                }
                            }
                        });

                    }
                }
            });
        });
    })
    ;
</script>
<script>
    $(document).ready(function () {

    });
</script>
</body>

</html>